﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

        <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>    
    <script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>    
    
    <script src="../../Scripts/grid.locale-es.js"></script>

<link href="../../Content/css/ui.jqgrid.css" rel="stylesheet" />

<script src="../../Scripts/jquery.jqGrid.min.js"></script>

<script type="text/javascript">

    alert(document);
    jQuery(document).ready(function () {
        var mydata = [{ id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "2", invdate: "2007-10-01", name: "test" },
                   { id: "3", invdate: "2007-10-01", name: "test" },
                   { id: "4", invdate: "2007-10-01", name: "test" },
                   { id: "5", invdate: "2007-10-01", name: "test" },
                   { id: "6", invdate: "2007-10-01", name: "test" },
                   { id: "7", invdate: "2007-10-01", name: "test" },
                   { id: "8", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" }
        ];

        jQuery("#list4").jqGrid({
            data: mydata,
            datatype: "local",
            height: 250,
            colNames: ['Inv No', 'Date', 'Client'],
            colModel: [
                { name: 'id', index: 'id', width: 60 },
                { name: 'invdate', index: 'invdate', width: 60 },
                { name: 'name', index: 'name', width: 100 }
            ],
            pager: '#pager',
            rowNum: 2,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            multiselect: true,
            imgpath: "",
            caption: "Manipulating Array Data"
        }
        );


        alert(mydata.length);
        for (var i = 0; i <= mydata.length; i++) {

            jQuery("#list4").addRowData(i, mydata[i]);
        }
    }//function
    );//ready

</script>
</head>
<body>
    


    
    


<table>
    <tr><td>hola</td></tr>
</table>

<table id="list4">
</table>


<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
